define(["jquery","utils","heatmap"], function($, utils,h337){
  
    function KeyVisualizer(){
        var t = this;
        this.heatmap = null;
        this.domObj = null;
    }

	$.extend(KeyVisualizer.prototype, {

		getHeatmap : function(){
			return this.heatmap;
		},
		hide: function(){
			$(this.domObj).hide();
		},
		hide: function(){
			$(this.domObj).show();
		},
		toggle: function(){
			$(this.domObj).toggle();
			this.heatmap.toggleDisplay();
			this.positionHeatmap();
		},
	 	positionHeatmap :function(){

            var parent = $(this.domObj);
            var position = parent.offset();
            var canvas = $(this.heatmap.get("canvas"));

            canvas.offset(position);
            canvas.css("width",parent.outerWidth( true ));
            canvas.css("height",parent.outerHeight( true ));    
        },
        init :function(){
		 	
		 	var t = this;
			t.domObj = document.createElement("div");
			t.domObj.setAttribute("id", "HeatmapKeyStrokeDistribution");
			$(t.domObj).addClass("heatMapKeyBoard");
			document.body.appendChild(t.domObj);
			var img = document.createElement("img");
			img.setAttribute("src", "./heatlib/images/keyboard.png");
			img.setAttribute("height", "100%");
			img.setAttribute("width", "100%");
			img.setAttribute("top", "0px");
			img.setAttribute("left", "0px");
			img.setAttribute("alt", "Flower");

			t.domObj.appendChild(img);
			var xx = h337.create({"element":t.domObj, "radius":26, "visible":true});
			t.heatmap = xx;
			t.heatmap.set("opacity","75");
			t.positionHeatmap();
		 }

   	});

    return KeyVisualizer;
});
//#endregion